<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-card class="!border-none" shadow="never">
            <el-form class="popupForm" ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <el-form-item label="分类" prop="type_id">
                    <div class="w-80">
                        <el-select v-model="formData.type_id" placeholder="请选择分类">
                            <el-option
                                v-for="item in type_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-form-item>
                
                <el-form-item label="标题" prop="title">
                    <div class="w-80">
                        <el-input v-model="formData.title" placeholder="请输入标题" clearable show-word-limit maxlength="30" />
                    </div>
                </el-form-item>
                <el-form-item label="来源" prop="title">
                    <div class="w-80">
                        <el-input v-model="formData.from" placeholder="请输入来源" clearable show-word-limit maxlength="30" />
                    </div>
                </el-form-item>
                <el-form-item label="创建人">
                    <div class="w-80">
                        <el-input v-model="formData.author" placeholder="请输入创建人" clearable show-word-limit maxlength="30" />
                    </div>
                </el-form-item>
                <el-form-item label="封面图">
                    <div class="w-80">
						<div>
							<material-picker v-model="formData.pics" :limit="1"/>
						</div>
					</div>
                </el-form-item>
                <el-form-item label="初始分享数">
                    <div class="w-80">
                        <el-input v-model="formData.base_share_count" type="number" placeholder="请输入初始分享数" />
                    </div>
                </el-form-item>
                <el-form-item label="初始获客数">
                    <div class="w-80">
                        <el-input v-model="formData.base_custom_count" type="number" placeholder="请输入初始获客数" />
                    </div>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <div>
                        <el-input-number v-model="formData.sort" :min="0" :max="9999" />
                        <div class="form-tips">默认为0， 数值越大越排前</div>
                    </div>
                </el-form-item>
                <el-form-item label="可见范围" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <editor v-model="formData.content" :height="520" />
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="handleSave" v-prevent-reclick="3000">保存</el-button>
            <el-button @click="()=>{$router.back()}">取消</el-button>
        </footer-btns>
    </div>
</template>
<script lang="ts" setup name="articleDetail">
import type { FormInstance } from 'element-plus'
import { contentSave, typeList, contentInfo } from '@/api/operation';
import feedback from '@/utils/feedback';

const type_list:any = ref([])
const getType = async () => {
    const res = await typeList({})
    console.log(res)
    type_list.value = res;
}
getType()


const formData:any = reactive({
    id: 0,
    type_id: '',
    title: '',
    from: '',
    content: '',
    author: '',
    base_share_count: '',
    base_custom_count: '',
    sort: '',
    status: 1,
    pics: ''
})
const formRules = {
    type_id: [{ required: true, message: '请选择分类', trigger: ['blur']}],
    title: [{ required: true, message: '请输入标题', trigger: ['blur']}],
    from: [{ required: true, message: '请输入来源', trigger: ['blur']}],
    link: [{ required: true, message: '请上传文件', trigger: ['blur']}],
}
const route = useRoute()
const router = useRouter()
if (route.query.id) {
    formData.id = route.query.id
}
const formRef = shallowRef<FormInstance>()
const handleSave = async () => {
    await formRef.value?.validate()
    let params = JSON.parse(JSON.stringify(formData));
    console.log(params)
    await contentSave(params)
    if (route.query.id) {
        feedback.msgSuccess('保存成功')
    } else {
        feedback.msgSuccess('新增成功')
    }
    router.back()
}
const getDetail = async () => {
    await nextTick()
    const data = await contentInfo({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}
route.query.id &&  getDetail()
</script>
<style lang="scss" scoped>
::v-deep .el-select{
    width: 100%;
}
</style>